<template>
    <div class="express-line">
        <ul>
            <li v-for="message in messages">
                <i></i>
                <p>{{message.time}}</p>
                <p>{{message.text}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
      props: ['messages']
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    /*快递节点*/
    .express-line {
        padding: 16px;
        li {
            position: relative;
            padding-left: 80px;
            margin-bottom: 30px;
            i {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #ddd;
                display: inline-block;
                position: absolute;
                left: 60px;
                top: 10px;
                z-index: 10;
            }
            p {
                color: #666666;
            }
        }
        li:nth-child(1) p {
            color: #09BB07;
        }
        li:nth-child(1) i {
            background-color: #09BB07;
        }
        li:nth-child(1)::before {
            content: "\6700\65B0";
            color: #09BB07;
            padding: 2px 5px;
            border-radius: 4px;
            border: 1px solid #09BB07;
            position: absolute;
            left: 5px;
            top: 5px;
        }

        li::after {
            content: "";
            width: 1px;
            height: 100%;
            border-left: 2px solid #ddd;
            position: absolute;
            left: 62px;
            top: 16px;
        }
        li:nth-child(1)::after {
            border-left: 2px solid #09BB07;
        }
    }

</style>